<template>
  <a-layout>
    <a-card title="七日交易趋势">
      <!--<div id="myChart" :style="{ width: 'calc(100% - 300px)', height: '440px'}"></div>-->
      <div id="myChart" :style="{width:'100%', height: '500px'}"></div>
    </a-card>
  </a-layout>
</template>
<script>
  import {mapState} from "vuex"

  export default {
    name: "TradeEcharts",
    props: {},
    data() {
      return {
        txnDate: [], //统计日期
        paySucAmt: [], //交易金额
        paySucCnt: [], //交易笔数
        averagePrice: [], //笔均单价
        // entryMchntCnt: 0, //昨日进件数据
        maxPaySucCnt: 0,
        maxPaySucAmt: 0
      };
    },

    computed: {
      ...mapState({
        user: state => state.account.user,
      }),
    },

    mounted() {
      this.gettcTxnStatis();
    },

    methods: {
      get7DaysBefore() {
        var dateList = [];
        var curDate = new Date();
        // 获取前七日日期
        curDate.setDate(curDate.getDate() - 6);
        for (var i = 0; i < 7; i++) {
          var y = curDate.getFullYear();
          var m = curDate.getMonth() + 1;
          if (m < 10) {
            m = '0' + m;
          }
          var d = curDate.getDate();
          if (d < 10) {
            d = '0' + d;
          }
          dateList.push(y + '-' + m + '-' + d);
          // 累加一天
          curDate.setDate(curDate.getDate() + 1);
        }
        return dateList;
      },
      drawLine(chartParams) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          tooltip: {},
          legend: {
            // bottom:'-5px',
            data: [{name: '交易金额', icon: 'pin', textStyle: {color: '#666666'}}, {
              name: '交易笔数',
              icon: 'pin',
              textStyle: {color: '#666666'}
            }]
          },
          xAxis: {
            type: 'category',
            min: 0,
            "axisLine": { // Y轴
              // "show": false
              "show": true
            },
            "axisTick": { // Y轴刻度线
              // show: false
              show: true
            },
            offset: 12,
            data: chartParams.txnDate,
          },
          // yAxis: {},
          yAxis: [{
            name: "交易金额（元）\r\n",
            type: "value",
            nameTextStyle: {
              fontStyle: 'normal',
              color: '#666666'
            },
            "axisLine": { // Y轴
              "show": false
            },
            "axisTick": { // Y轴刻度线
              show: false
            },
            min: 0,
            max: chartParams.maxPaySucAmt,
            splitNumber: 5,
            // interval: chartParams.maxPaySucAmt / 5,

          }, {
            name: "交易笔数（笔）\r\n",
            type: "value",
            nameTextStyle: {
              fontStyle: 'normal',
              color: '#666666'
            },
            "axisLine": { // Y轴
              "show": false
            },
            "axisTick": { // Y轴刻度线
              show: false
            },
            min: 0,
            max: chartParams.maxPaySucCnt,
            splitNumber: 5,
            // interval: chartParams.maxPaySucCnt / 5
          }],
          // series: [{
          //   name: '销量',
          //   type: "line",
          //   data: [5, 20, 36, 10, 10, 20]
          // }]
          series: [{
            name: '交易金额',
            type: 'line',
            // smooth: true,
            smoothMonotone: 'X',
            data: chartParams.paySucAmt,
            itemStyle: {
              normal: {
                color: "#0065ff",
                lineStyle: {
                  width: 4,
                  color: "#0065ff"
                }
              }
            }
          }, {
            name: '交易笔数',
            type: 'line',
            // smooth: true,
            smoothMonotone: 'X',
            data: chartParams.paySucCnt,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#ff5630",
                lineStyle: {
                  width: 4,
                  color: "#ff5630"
                }
              }
            }
          }]
        });

      },

      gettcTxnStatis() {
        //七日交易趋势
        let params = {}
        params.userId = this.user.id;
        this.$get("/admin/csmc/tcTxnStatis/getTxnStatis", {...params}).then((res) => {
            console.log("七日交易趋势res====", res);

            if (!res) {
              return false;
            }
            this.txnDate = res.data.txnDate;
            this.paySucCnt = res.data.paySucCnt;
            this.paySucAmt = res.data.paySucAmt;
            this.averagePrice = res.data.averagePrice;
            if (!this.txnDate || this.txnDate.length <= 0) {
              this.txnDate = this.get7DaysBefore();
            }
            if (!this.paySucCnt || this.paySucCnt.length <= 0) {
              paySucCnt = ["0", "0", "0", "0", "0", "0", "0"];
            }
            this.maxPaySucCnt = Math.max.apply(null, this.paySucCnt);
            if (this.maxPaySucCnt == 0) {
              this.maxPaySucCnt = 1;
            }
            this.maxPaySucCnt = Math.ceil(this.maxPaySucCnt / 9.5);
            this.maxPaySucCnt = this.maxPaySucCnt * 10;
            if (!this.paySucAmt || this.paySucAmt.length <= 0) {
              this.paySucAmt = ["0", "0", "0", "0", "0", "0", "0"];
            }
            this.maxPaySucAmt = Math.max.apply(null, this.paySucAmt);
            this.maxPaySucAmt = Math.ceil(this.maxPaySucAmt / 9.5);
            this.maxPaySucAmt = this.maxPaySucAmt * 10;

            // console.log("this.txnDate====", this.txnDate);
            // console.log("this.paySucCnt====", this.paySucCnt);
            // console.log("this.paySucAmt====", this.paySucAmt);
            // console.log("this.averagePrice====", this.averagePrice);
            // console.log("this.maxPaySucAmt====", this.maxPaySucAmt);
            // console.log("this.maxPaySucCnt====", this.maxPaySucCnt);

            let chartParams = {}
            chartParams.txnDate = this.txnDate;
            chartParams.paySucCnt = this.paySucCnt;
            chartParams.paySucAmt = this.paySucAmt;
            chartParams.averagePrice = this.averagePrice
            this.drawLine(chartParams)
          }
        )
      },


    },
  }
  ;
</script>

